<template>
  <div class="top-ten main-body">
    <div class="top-ten-title clearfix">
      <img src="../../../../assets/img/template-item2/icons/jianbianleft.png" alt="">
      <h3><img src="../../../../assets/img/template-item2/icons/pinpai.png" alt=""></h3>
      <img src="../../../../assets/img/template-item2/icons/jianbianright.png" alt="">
    </div>
    <div class="top-ten-body">
      <div class="top-ten-body-title">
        <img class="left" src="../../../../assets/img/template-item2/icons/shidapinpai_img_maisuileft.png" alt="">
        <img class="right" src="../../../../assets/img/template-item2/icons/shidapinpai_img_maisuiright.png" alt="">
        <h2>本年度最牛十大品牌</h2>
      </div>
      <div class="top-ten-body-brand clearfix">
        <div v-for="i in 10" :key="i" class="ten-brand left">
          <div class="brand">
            <img src="../../../../assets/img/template-item2/brands/2.png" alt="">
          </div>
          <div class="top clearfix">
            <img class="left" src="../../../../assets/img/template-item2/icons/shidapinpai_icon_first.png" alt="">
            <h4 class="left">小刀电动车</h4>
          </div>
        </div>
      </div>
    </div>
    <button>查看活动详情</button>
  </div>
</template>

<script>
export default {
  name: 'TopTen',
  data() {
    return {

    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../../../assets/template-item2/css/base";

.top-ten{
  margin-top: 40px;
  @include btn;
  button{
    width:141px;
    height:36px;
    line-height: 34px;
    margin-left: 530px;
  }
  .top-ten-title{
    @include panel;
    h3{
      margin: 0 23px;
      img{
        width: 143px;
        height: 35px;
        margin-top: -2px;
      }
    }
  }
  .top-ten-body{
    width: 100%;
    height: 524px;
    margin: 40px 0;
    padding: 26px 80px;
    background: url('../../../../assets/img/template-item2/icons/shidapinpai_bg_beijing.png') no-repeat;
    .top-ten-body-title{
      width: 528px;
      height: 74px;
      margin: 0 auto;
      h2{
        font-size:48px;
        font-family:BDZongYi-A001 FZZongYi-M05S	Arial;
        font-weight:normal;
        line-height:68px;
        color:#ffffff;
      }
    }
    .top-ten-body-brand{
      margin-top: 20px;
      .ten-brand{
        width: 198px;
        height: 160px;
        background-color: #fff;
        margin-left: 12px;
        margin-top: 15px;
        .brand{
          width: 100%;
          height: 110px;
          padding: 9px 17px;
          border-bottom: 1px solid #ECECEC;
          img{
            width: 164px;
            height: 92px;
          }
        }
        .top{
          padding: 8px 36px;
          img{
            width: 27px;
            height: 31px;
          }
          h4{
            font-size:18px;
            font-weight:600;
            line-height: 28px;
            margin-left: 5px;
          }
        }
      }
      .ten-brand:nth-child(1),.ten-brand:nth-child(6){
        margin-left: 0px;
      }
    }
  }
}
</style>
